<template>
    <div class="pledgeLoanOrder">
        <assets-head :title="$t('质押借币订单')" :backFunc="() => $router.push('/pledgeLoan')"></assets-head>
        <template v-if="noticeList.length">
            <div class="h-100 flex items-center justify-between pl-32 pr-28 mb-40" style="color:#F5C425;background:#56481B;" v-for="(item,index) in noticeList" :key="index" @click="toOrderDetail(item)">
                <div class="flex font-28">
                    <img src="../../assets/image/waring.png" alt="" class="w-36 h-36" />
                    <span class="ml-22">{{$t('有笔订单质押率高于60%有平仓风险')}}</span>
                </div>
                <img src="@/assets/image/warningTo.png" alt="" class="w-32 h-32" />
            </div>
        </template>
        <div class="content px-32">
            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                :finished-text="orderList.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" >
                <div class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30" v-for="(item,index) in orderList" :key="index"
                    @click="toOrderDetail(item.id)">
                    <div class="flex justify-between border-b-color h-101 box-border text items-center mb-30">
                        <div class="textColor"><span
                                class="skyColor mr-10">{{fixStr(item.orderType)}}</span>{{item.loanAmount}}&nbsp;USDT</div>
                        <div
                            :class="{'redColor':item.state==3,'red': item.state == 4,'text-grey':item.state==2,'skyColor':item.state==1}">
                            {{fixStatus(item.state)}}</div>
                    </div>
                    <div class="flex">
                        <div class="mr-100">
                            <div class="text-grey">{{$t('贷款币种')}}</div>
                            <div class="textColor mt-20">{{item.loanCurrency.toUpperCase()}}</div>
                        </div>
                        <div class="mr-100">
                            <div class="text-grey">{{$t('质押率')}}</div>
                            <div class="textColor mt-20">{{item.pledgeRate!==''?(item.pledgeRate*10000/100).toFixed(2):'--'}}%</div>
                        </div>
                        <div>
                            <div class="text-grey">{{$t('总负债')}}</div>
                            <div class="textColor mt-20">{{item.debtAmount}}&nbsp;{{ item.loanCurrency.toUpperCase() }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!orderList.length && !loading">
                    <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                    <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { List } from 'vant'
    export default {
        props: {

        },
        components: {
            assetsHead,
            [List.name]: List,
        },
        data(){
            return {
                page:1,
                orderList:[],
                noticeList:[],
                loading: false,
                finished:false,
            }
        },
        
        methods: {
            onLoad() {
                this.getOrderList()
            },
            toOrderDetail(id){
                this.$router.push({ path: '/pledgeLoanOrderDetail', query: { id }})
            },
            fixStr(orderType){
                let str = ''
                if (orderType ==1){
                    str = this.$t('借款')
                } else if (orderType == 2){
                    str = this.$t('新增质押')
                } else if (orderType == 3) {
                    str = this.$t('续借')
                } else if (orderType == 4) {
                    str = this.$t('还款')
                } else if (orderType == 5) {
                    str = this.$t('强平结清')
                }
                return str;
            },
            fixStatus(state){
                let string = ''
                if (state == 1) {
                    string = this.$t('计息中')
                } else if (state == 2) {
                    string = this.$t('已结清')
                } else if (state == 3) {
                    string = this.$t('强平结清')
                } else if (state == 4) {
                    string = this.$t('已逾期')
                } 
                return string
            },
            getOrderList(){
                Axios.orderList({
                    page_no:this.page
                }).then(res=>{
                    this.orderList = [...this.orderList, ...res.data.list]
                    // console.log(logs)
                    this.loading = false
                    if (res.data.list.length < 10) {
                        this.finished = true
                    } else {
                        this.page++
                    }
                    this.noticeList = res.data.noticeList
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.pledgeLoanOrder{
    width: 100%;
    box-sizing: border-box;
}
.skyColor{
    color: #13D3EB;
}
.redColor{
    color: #E35461;
}
.red{
    color: #FF0000;
}
</style>